<template>
  <div class="home_container">
    <el-button @click="router.push('/basic')">基础使用</el-button>
    <el-button @click="router.push('/form')">form表单验证</el-button>
    <!-- <el-button @click="router.push('/route/123')">params传参</el-button> -->
    <el-button @click="queryParam">query传参</el-button>
    <el-button @click="router.push('/dynamicallyEditCss')"
      >动态调整样式</el-button>
    <el-dropdown @command="langChange">
      <el-button>语系切换</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="lang in langList"
            :key="lang.value"
            :command="lang.value"
            >{{ lang.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
     <el-button @click="router.push('/lang')"
      >国际化展示</el-button>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import store from "@/store";
const { locale } = useI18n();
const router = useRouter();
const settingStore = store.settingStore();
const langList = settingStore.getLanguageList;

function queryParam() {
  router.push({
    path: "/route",
    query: {
      id: 123,
    },
  });
}
function langChange(command) {
  locale.value = command;
  settingStore.setLanguage(command);
  location.reload();
}
</script>
<style lang="scss" scoped>
.home_container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.el-button + .el-button {
  margin-left: 0px;
}
</style>
